<template>
    <div>
        <h2>房型信息显示页面</h2>
        <a href="/fxadd">房型录入</a>
        <br></br>
        
        <a href="/fhxs">房号显示</a>
        <br>
        房型名称 <input type="text" v-model="que.fxmc">
        房型大小 <input type="text" v-model="que.d1">-
        <input type="text" v-model="que.d2">

      
        
        <input type="button" value="查询" @click="xs">

        <table class="table">
            <thead>
                <tr>
                    <td>房型名称</td>
                    <td>房型大小</td>
                    <td>房型预览图</td>
                    <td>人数</td>
                    <td>价格</td>
                 
                </tr>
            </thead>
            <tbody>
                  <tr v-for="m in data">
                    <td>{{ m.fxmc }}</td>
                    <td>{{ m.fxdx }}</td>
                    <td> <img :src="'https://localhost:7258/'+m.img" style="width: 60px;height: 60px;"></td>
                    <td>{{ m.rs }}</td>
                    <td>{{ m.jg }}</td>
                  
                </tr>
            </tbody>
        </table>
        总条数:{{ quer.count }} 每页{{ que.size }}条 总页数:{{ quer.page }} 第{{ que.index }}页
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(2)">
        <input type="button" v-for="m in quer.page" :value="m"  @click="ym(m)">

        <input type="button" value="下一页" @click="page(3)">
        <input type="button" value="尾页" @click="page(4)">
        <select  v-model="wue.ws" @change="wues">
            <option value="2">每页2条</option>
            <option value="3">每页3条</option>
            <option value="5">每页5条</option>
            <option value="10">每页10条</option>
        </select>
         <input type="number" v-model="wuew.ws">

        <input type="button" value="跳转" @click="tz">
        
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,onMounted, compile } from 'vue';
import { useRouter } from 'vue-router';

const stor= useRouter();

const page=(a:any)=>{
    if(a==1){
        que.value.index=1;
        xs();
    }
       if(a==2){
        if(que.value.index>1){
             que.value.index-=1;
        xs();
        }
    
    }
       if(a==3){
        if(que.value.index<quer.value.page){
              que.value.index+=1;
        xs();
        }
      
    }
       if(a==4){
        que.value.index=quer.value.page;
        xs();
    }
}
const ym=(val:any)=>{

    que.value.index=val
    xs();
}
const wue=ref({
    ws:2,
})
const wues=()=>{
    que.value.size=wue.value.ws
    xs();
}
const wuew=ref({
    ws:0,
})
const tz=()=>{
    que.value.index=wuew.value.ws
    xs();
}


const data=ref([{
     "fxid": 0,
  "fxmc": "",
  "fxdx": 0,
  "img": "",
  "rs": "",
  "jg": ""
}])

 const que=ref({
    index:1,
    size:2,
    fxmc:"",
    d1:null,
    d2:null,
    
 })
 const quer=ref({
    count:0,
    page:0,
 })
 onMounted(()=>{
    xs();
 })
 const xs=()=>{
    axios.get("https://localhost:7258/api/roomfx/fxxs",{params:que.value}).then(res=>{
        data.value=res.data.page

        quer.value.count=res.data.count
        quer.value.page=Math.ceil(quer.value.count/que.value.size)

    })
 }



</script>

<style scoped>

</style>